<template>
	<view class="video_preview">
		<video class="video_preview_video" :src="item?.url" autoplay loop v-if="item?.type == 2"></video>
		<image class="video_preview_video" :src="item?.url" v-else mode="aspectFit"></image>
		<view class="video_preview_btm">
			<view @click="handleDownload">
				<!-- <u-icon name="download" size="28"></u-icon> -->
				<image src="http://qianxueapplet.suoeryun.com/download.png"></image>
			</view>
			<view @click="handleDel">
				<!-- <u-icon name="trash" size="28"></u-icon> -->
				<image src="http://qianxueapplet.suoeryun.com/delete.png"></image>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	import { qxCloudMediaDelete } from "@/config/mine.api";

	const item = ref();

	onLoad((params) => {
		console.log(params, 'params');
		item.value = params;
	})

	/**
	 * 下载
	 */
	function handleDownload() {
		uni.showLoading({
			title: '正在保存，请稍等。。。'
		});
		uni.downloadFile({
			url: item?.value?.url, // 文件下载地址 
			success: function (res) {
				console.log('下载文件成功', res);
				if (item.value?.type == 2) {//视频
					uni.saveVideoToPhotosAlbum({
						filePath: res?.tempFilePath,
						success: function () {
							uni.hideLoading();
							console.log('保存视频到相册成功');
							uni.showToast({
								icon: 'none',
								title: "文件保存成功！"
							})
						},
						fail: function (err) {
							uni.hideLoading();
							console.log(err);
						}
					})
				} else {//图片
					uni.saveImageToPhotosAlbum({
						filePath: res?.tempFilePath, // 要保存的网络图片 URL  
						success: function () {
							uni.hideLoading();
							console.log('保存图片到相册成功');
							uni.showToast({
								icon: 'none',
								title: "文件保存成功！"
							})
						},
						fail: function (err) {
							uni.hideLoading();
							console.log(err);
						}
					});
				}
			},
			fail: function (err) {
				console.log(err);
			}
		});
	}

	/**
	 * 删除
	 */
	function handleDel() {
		return uni.showModal({
			title: '提示',
			content: '确认是否删除？',
			confirmColor: '#FF943C',
			success: async function (res) {
				if (res.confirm) {
					await qxCloudMediaDelete({ id: item.value?.id });
					uni.showToast({
						icon: 'none',
						title: '删除成功！'
					})
					uni.$u.route({
						type: 'back',
					})
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		})

	}
</script>

<style lang="scss" scoped>
	.video_preview_video {
		width: 100vw;
		height: calc(100vh - 118rpx);
		background-color: #000000;
	}

	.video_preview_btm {
		background-color: #fff;
		height: 88rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #999;
		padding: 10rpx 0;

		view {
			display: flex;
			flex-direction: column;
			align-items: center;

			&>image {
				width: 56rpx;
				height: 56rpx;
			}
		}
	}
</style>